import React, { PureComponent } from 'react';
import { connect } from 'react-redux';

import Topic from './components/Topic';
import List from './components/List';
import Recommend from './components/Recommend';
import Writer from './components/Writer';

import { actionCreators } from './store';

import { 
	HomeWrapper,
	HomeLeft,
  HomeRight,
  BackTop
} from './style';

// 采用 PureComponent 解决其他组件 state 变动导致无关组件跟着刷新的尴尬 (必须结合 immutable 管理数据)
class Home extends PureComponent {
  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img className='banner-img' alt='' src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
          <Topic />
          <List />
        </HomeLeft>
        <HomeRight>
          <Recommend />
          <Writer />
        </HomeRight>
        { this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>顶部</BackTop> : null}
      </HomeWrapper>
    )
  }

  componentDidMount() { 
		this.props.changeHomeData();
		this.bindEvents();
  }

  componentWillUnmount() {  // 当该组件销毁时，去除事件
		window.removeEventListener('scroll', this.props.changeScrollTopShow);
  }
  
  handleScrollTop() {
		window.scrollTo(0, 0);
	}
  
  bindEvents() {
		window.addEventListener('scroll', this.props.changeScrollTopShow);
	}
}

const mapStateToProps = (state) => ({
	showScroll: state.getIn(['home', 'showScroll'])
})

const mapDispatchToProps = (dispatch) => ({
	changeHomeData() {
		dispatch(actionCreators.getHomeInfo());
	},
	changeScrollTopShow() {
		if (document.documentElement.scrollTop > 100) {
			dispatch(actionCreators.toggleTopShow(true))
		}else {
			dispatch(actionCreators.toggleTopShow(false))
		}
	}
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);
